<template>
  <div class="container">
    <toolbar
      :title="$route.meta.title"
      :back="true"
      rightText="写书评"
      @handleRightTextClick="$router.push('/books/discuss/'+search.bookId+'/edit')"
    ></toolbar>

    <div class="t-container">
      <scroll :data="data" @loadMore="loadMore" :loading="true">
        <book-info :bookId="search.bookId"></book-info>
        <discuss-lists :discussList="data" :totalCount="totalCount"></discuss-lists>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";
import Star from "./components/Star";
import Scroll from "components/Scroll";
import BookInfo from "./components/BookInfo";
import DiscussLists from "./components/DiscussList";

import { getDiscussList } from "api/DiscussApi";
 
export default {
  name: "DiscussList",
  components: {
    Toolbar,
    Star,
    Scroll,
    BookInfo,
    DiscussLists
  },
  data() {
    return {
      data: [],
      search: {
        currentIndex: 1,
        pageSize: 10,
        bookId: 0
      },
      totalPage: 1,
      totalCount: 0
    };
  },
  methods: {
    getDiscussList() {
      getDiscussList(this.search).then(res => {
        if (res.meta.success) {
          this.data = this.data.concat(res.data.datas);
          this.totalPage = res.data.pagination.totalPage;
          this.totalCount = res.data.pagination.totalCount
        }
      });
    },
    loadMore (currentIndex, $scroll) {
      if(currentIndex <= this.totalPage) {
        this.search.currentIndex = currentIndex
        this.getDiscussList();
      } else $scroll.forceUpdate()
    }
  },
  created() {
    this.search.bookId = this.$route.params.bookId;
    this.getDiscussList();
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';
</style>
